<template>
	<div>
		<el-input 
			input-style="width: 300px"
			placeholder="请输入搜索的数据" v-model="page.searchValue"  @input="handleInput" clearable ></el-input>
		<el-button @click="handleDeleteAll" v-if="ids.length">删除选中</el-button>
		<el-table :data="list" style="width: 100%" ref="multipleTableRef" @select="select">
			<el-table-column type="selection"></el-table-column>
			<el-table-column prop="id" label="ID"></el-table-column>
			<el-table-column prop="name" label="姓名"></el-table-column>
			<el-table-column label="头像">
				<!-- 自定义模板 -->
				<template #default="scope">
					<el-image :src="scope.row.avatar" lazy></el-image>
				</template>
			</el-table-column>
			<el-table-column prop="type" label="类型"></el-table-column>
			<el-table-column prop="desc" label="描述" width="300px"></el-table-column>
			<el-table-column prop="tel" label="电话"></el-table-column>
			<el-table-column label="操作">
				<template #default="scope">
					<el-button type="primary">编辑</el-button>
					<el-button type="danger" @click="openDialog(scope.row.id)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>

		<el-pagination layout="prev, pager, next" :total="totalCount" @current-change="changeCode"></el-pagination>

		<el-dialog v-model="visible" title="确认要删除吗?">
			<el-button @click="handleOk">确认</el-button>
			<el-button @click="handleCancel">取消</el-button>
		</el-dialog>
	</div>
</template>

<script lang="ts" setup>
import { onMounted, reactive, ref } from 'vue'
import { fetchList, deleteList } from '@/api'
import { debounce } from 'lodash'

/**************************** 分页列表 *********************************/
// 列表数据接口
interface ListItem {
	'name': string,
	'id': string,
	'tel': number,
	'desc': string,
	'avatar': string,
	'type': '学生' | '讲师' | '辅导员' | '主任' | '院长' | '校长' | '处长'
}
// 列表数据
const list = ref<ListItem[]>([]);
// 总数据数量
const totalCount = ref(0)
// 分页器配置和搜索数据
const page = reactive({
	pageCode: 1,
	pageSize: 10,
	searchValue: ''
})

// 方法
const changeCode = (pageCode: number) => {
	page.pageCode = pageCode
	getList()
}
// 请求当前数据函数
const getList = () => {
	fetchList(page).then(resp => {
		const { data, total } = resp.data.data
		list.value = data
		totalCount.value = total
	})
}
// 声明周期函数
onMounted(() => {
	getList()
})

/********************** 删除  ***********************/
import type { ElTable } from 'element-plus'
const multipleTableRef = ref<InstanceType<typeof ElTable>>()
// 保存当前选中的数据的id
const ids = ref<string[]>([])
// 保存当前删除id
const id = ref('')
// 单个删除  防抖
const handleDelete = debounce(async (id: string) => {
	// 删除数据
	await deleteList({ id })
	// 重新请求数据
	await getList()
}, 400)

// 多个删除 防抖
const handleDeleteAll = debounce(async () => {
	// 删除数据
	await deleteList({ id: ids.value })
	// 重新请求数据
	await getList()
}, 400)

// 选中
const select = (selection: ListItem[], row: ListItem) => {
	ids.value = selection.map(v => v.id)
}

// 控制弹框显示隐藏
const visible = ref(false)
const handleOk = () => {
	visible.value = false
	handleDelete(id.value)
}
const handleCancel = () => {
	visible.value = false
}
const openDialog = (rowID: string) => {
	visible.value = true
	id.value = rowID
}

/***************************** 搜索 ********************************/

// 搜索防抖
const handleInput = debounce(() => {
	getList()
}, 400)
</script>